
//
const gulp=require('gulp'),
        htmlmin=require('gulp-htmlmin'),
        cleanCss=require('gulp-clean-css'),
        autoprefixer=require('gulp-autoprefixer'),
        uglify=require('gulp-uglify'),
        babel =require('gulp-babel'),
        del=require('del'),
        connect=require('gulp-connect'),
       {createProxyMiddleware} =require('http-proxy-middleware'),
       sass=require('gulp-sass')

   

const paths={
    html:{
        src:'src/**/*.html',
        dest:'dist'
    },
    css:{
        src:'src/css/**/*.scss',
        dest:'dist/css'
    },
    js:{
        src:'src/js/**/*.js',
        dest:'dist/js'
    },
    libs:{
        src:'src/libs/**',
        dest:'dist/libs'
    },
    imgs:{
        src:'src/images/**',
        dest:'dist/imgs'
    },
	ico: {
	  src: 'src/favicon.ico',
	  dest: 'dist'
	},
	
}
//制定html任务：压缩html,从src里面取出html文件，然后压缩，最后放到dist目录
// **代表所有目录 *代表多有文件
//gulp.dest() destination目的地
//htmlmin参数里面需要传参
const html=()=>{
    return gulp.src(paths.html.src)
    .pipe(htmlmin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
      	removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      	removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
      	removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      	minifyJS: true,//压缩页面JS
      	minifyCSS: true//压缩页面CSS 
    }))
    .pipe(gulp.dest(paths.html.dest))
    .pipe(connect.reload())

}

//制定css任务：压缩css
//前缀是用插件，为部分css自动加上插件
const css =()=>{
    return gulp.src(paths.css.src)
    .pipe(sass())
    .pipe(autoprefixer({
        cascade:false
    }))
    // .pipe(cleanCss())
    .pipe(gulp.dest(paths.css.dest))
    .pipe(connect.reload())
}
const js=()=>{
    return gulp.src(paths.js.src)
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(connect.reload())

}
//制定libs任务：把文件放到dist里面
const libs=()=>{
    return gulp.src(paths.libs.src)
    .pipe(gulp.dest(paths.libs.dest))
}
const imgs=()=>{
    return gulp.src(paths.imgs.src)
    .pipe(gulp.dest(paths.imgs.dest))
}

//制定del任务：在执行gulp之前把dist删除
//解决文件更改
const delDist=()=>del('dist')

//制定server任务：开启本地服务器
const server=()=>{
    connect.server({
        root:'dist',//项目的根目录，项目运行的目录
        port:1111,
        livereload:true,
        middleware(){
            return[
                //把前端以api开头的目录代理到某某服务器
                createProxyMiddleware('/api',{
                    target :'http://www.xiongmaoyouxuan.com',
                    changeOrigin:true
                })
            ]
        }
    })
}

//watch：监听文件改变可以执行对应任务
const watch=()=>{
    gulp.watch(paths.html.src,html)
    gulp.watch(paths.js.src,js)
    gulp.watch(paths.css.src,css)
}

//ico任务：把ico图标移到dist
const ico=()=>gulp.src(paths.ico.src).pipe(gulp.dest(paths.ico.dest))
//parallel:异步执行
//series：同步执行
//线同步执行删除dist的任务，再异步的执行所有任务
module.exports.default=gulp.series(delDist,gulp.parallel(html,css,js,libs,imgs,server,watch,ico)
)
//制定js任务：压缩 es6转es5
//把制定好的任务导出
//这种方法是把页面单独导出
// module.exports = {
//     html,
//     css,
//     js,
//     libs,
//     images
// } 